<template>
  <div class="mod-config">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-row>
        <el-form-item label="时间筛选">
          <el-date-picker
            v-model="dataForm.time"
            ref="time"
            :clearable="false"
            type="daterange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :editable="false"
            :picker-options="timeOptions"
          ></el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="所属公司">
          <el-select v-model="dataForm.companyId" @change="companyChange" clearable filterable placeholder="全部">
            <el-option
              v-for="item in companys"
              :key="item.id"
              :label="item.companyName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开卡店铺">
          <el-select v-model="dataForm.shopId" @change="shopChange" clearable filterable placeholder="全部">
            <el-option
              v-for="item in shops"
              :key="item.id"
              :label="item.shopName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item>
          <el-button @click="getDataList()">更新</el-button>
        </el-form-item>
      </el-row>
    </el-form>
    <h3>订单收入统计图</h3>
    <ve-line
      :extend="orderChart.chartExtend"
      :data="orderChart.chartData"
      :settings="orderChart.chartSettings"
    />
    <h3>会员卡收入统计图</h3>
    <ve-line
      :extend="vipChart.chartExtend"
      :data="vipChart.chartData"
      :settings="vipChart.chartSettings"
    />
  </div>
</template>

<script>
import VeLine from "v-charts/lib/line";
export default {
  data() {
    return {
      dataForm: {
        time: []
      },
      orderChart: {
        chartData: {},
        chartSettings: {},
        chartExtend: {},
      },
      vipChart: {
        chartData: {},
        chartSettings: {},
        chartExtend: {},
      },
      
      selectDate: "",
      timeOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.selectDate = minDate.getTime();
          if (maxDate) {
            this.selectDate = "";
          }
        },
        disabledDate: time => {
          if (this.selectDate !== "") {
            const one = 30 * 24 * 3600 * 1000;
            const minTime = this.selectDate - one;
            const maxTime = this.selectDate + one;
            return time.getTime() < minTime || time.getTime() > maxTime;
          }
        }
      }
    };
  },
  components: {
    VeLine
  },
  created() {
    this.orderChart.chartSettings = {
      labelMap: {
        num: "订单量",
        amount: "收入金额"
      }
    };
    this.orderChart.chartExtend = {
      xAxis: { boundaryGap: true }
    };
    this.vipChart.chartSettings = {
      labelMap: {
        amount: "收入金额"
      }
    };
    this.vipChart.chartExtend = {
      xAxis: { boundaryGap: true }
    };
  },
  activated() {
    this.timeInit();
  },
  methods: {
    timeInit() {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      this.dataForm.time.push(
        this.dateFormat(start, "YYYY-MM-DD"),
        this.dateFormat(end, "YYYY-MM-DD")
      );
      this.getDataList();
    },
    // 获取数据列表
    getDataList() {
      var time = "";
      if (this.dataForm.time && this.dataForm.time.length == 2) {
        time = this.dataForm.time[0] + "~" + this.dataForm.time[1];
      }
      this.$http({
        url: this.$http.adornUrl("/report/stat/income"),
        method: "get",
        params: this.$http.adornParams({
          time: time
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.orderChart.chartData = data.orderChartData;
          
          this.vipChart.chartData = data.vipChartData;
        } else {
          this.orderChart.chartData = {
            rows: []
          };
          this.vipChart.chartData = {
            rows: []
          };
        }
        this.vipChart.chartData.columns = ["day", "amount"];
        this.orderChart.chartData.columns = ["day", "amount"];
      });
    }
  }
};
</script>
